import '@/app/(main)/paper/style.scss';
import { TrendingUp, Target, TrendingDown, ListChecks } from 'lucide-react';
import { fetchPaperTrackRecord } from '@/lib/api/paper';
import { formatBpPercent, formatBpAbs, bpDirection } from '@/lib/utils/paper';

type Props = {
	params: Promise<{ sid: string }>;
};

// 프로필 "모의투자 성적" 탭 (익명 허용 · SSR) — 누적수익률·승률·MDD·체결수
export default async function UserProfilePaperPage({ params }: Props)
{
	const { sid } = await params;
	const res = await fetchPaperTrackRecord(sid);
	const record = res.success ? res.data : null;

	if (!res.success) {
		return <div className='paper__error' role='alert'>모의투자 성적을 불러오지 못했습니다.</div>;
	}

	if (!record || !record.hasAccount) {
		return <div className='user-profile__empty'>아직 모의투자에 참여하지 않았습니다.</div>;
	}

	const returnDir = bpDirection(record.cumReturnBp);

	return (
		<section className='user-profile__stats' aria-label='모의투자 성적'>
			<div className='user-profile__stat'>
				<TrendingUp size={20} className='user-profile__stat-icon' strokeWidth={1.75} />
				<div className='user-profile__stat-body'>
					<span className='user-profile__stat-label'>누적 수익률</span>
					<span className={`user-profile__stat-value paper__value--${returnDir}`}>{formatBpPercent(record.cumReturnBp)}</span>
				</div>
			</div>

			<div className='user-profile__stat'>
				<Target size={20} className='user-profile__stat-icon' strokeWidth={1.75} />
				<div className='user-profile__stat-body'>
					<span className='user-profile__stat-label'>승률</span>
					<span className='user-profile__stat-value'>{formatBpAbs(record.winRateBp)}</span>
				</div>
			</div>

			<div className='user-profile__stat'>
				<TrendingDown size={20} className='user-profile__stat-icon' strokeWidth={1.75} />
				<div className='user-profile__stat-body'>
					<span className='user-profile__stat-label'>최대 낙폭 (MDD)</span>
					<span className='user-profile__stat-value paper__value--down'>{formatBpAbs(record.mddBp)}</span>
				</div>
			</div>

			<div className='user-profile__stat'>
				<ListChecks size={20} className='user-profile__stat-icon' strokeWidth={1.75} />
				<div className='user-profile__stat-body'>
					<span className='user-profile__stat-label'>체결 수</span>
					<span className='user-profile__stat-value'>{record.fillCount.toLocaleString()}</span>
				</div>
			</div>
		</section>
	);
}